<template>
  <div class="todo-item" :class="{ 'is-completed': todo.completed }">
    <div class="todo-content">
      <el-checkbox 
        v-model="isCompleted" 
        @change="updateStatus"
      />
      
      <div class="todo-details">
        <div class="todo-title">{{ todo.title }}</div>
        <div class="todo-meta">
          <span v-if="todo.category" class="category-badge">
            {{ todo.category.name }}
          </span>
          
          <span v-for="tag in todo.tags" :key="tag.id" class="tag-badge">
            {{ tag.name }}
          </span>
          
          <span class="todo-date">
            {{ formatDate(todo.dueDate) }}
          </span>
        </div>
      </div>
    </div>
    
    <div class="todo-actions">
      <el-button 
        type="primary" 
        size="small" 
        plain
        @click="handleEdit"
      >
        编辑
      </el-button>
      
      <el-button 
        type="danger" 
        size="small" 
        plain
        @click="handleDelete"
      >
        删除
      </el-button>
    </div>
    
    <edit-todo-dialog
      v-if="showEditDialog"
      v-model:visible="showEditDialog"
      :todo="todo"
      @update="handleUpdate"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import EditTodoDialog from './EditTodoDialog.vue'

const props = defineProps({
  todo: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update', 'delete'])

const isCompleted = ref(props.todo.completed)
const showEditDialog = ref(false)

const formatDate = (dateString) => {
  if (!dateString) return '无截止日期'
  
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'short',
    day: 'numeric'
  })
}

const updateStatus = () => {
  emit('update', props.todo.id, { completed: isCompleted.value })
}

const handleEdit = () => {
  showEditDialog.value = true
}

const handleUpdate = (updates) => {
  emit('update', props.todo.id, updates)
  showEditDialog.value = false
}

const handleDelete = () => {
  ElMessageBox.confirm(
    '确定要删除这个待办事项吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    emit('delete', props.todo.id)
  }).catch(() => {})
}
</script>

<style scoped>
.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.todo-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.todo-item.is-completed {
  opacity: 0.7;
}

.todo-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.todo-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.todo-title {
  font-size: 1.1rem;
  font-weight: 500;
}

.todo-item.is-completed .todo-title {
  text-decoration: line-through;
  color: #909399;
}

.todo-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.category-badge {
  background-color: #409EFF;
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

.tag-badge {
  background-color: #67C23A;
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

.todo-date {
  color: #909399;
}

.todo-actions {
  display: flex;
  gap: 0.5rem;
}

@media (max-width: 768px) {
  .todo-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .todo-content {
    width: 100%;
    margin-bottom: 1rem;
  }
  
  .todo-actions {
    width: 100%;
    justify-content: flex-end;
  }
}
</style>